<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_固定定位广告条</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            font-size: 30px;
            color: #fff;
            position: fixed;
            top: 0;
            /*viewport视口  100vw：撑满整个视口宽度，占100% vh视口高度*/
            width: 100vw;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #F35336;
            right: 20px;
        }
        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部广告条</div>
    <div class="left">我是左侧广告条</div>
    <div class="right">我是右侧广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem illum molestias nemo qui quibusdam
            quis quos. Corporis debitis excepturi maiores optio quia repellendus saepe totam unde vero voluptatem.
            Distinctio, illo.
        </div>
        <div>Ad alias architecto at, beatae commodi cupiditate delectus ea excepturi exercitationem id ipsam iusto
            laborum magnam nemo nihil non odio officia perferendis placeat provident quasi ratione recusandae
            reprehenderit velit voluptas!
        </div>
        <div>Aliquam animi at autem commodi consectetur deserunt dicta dignissimos earum eius, excepturi expedita facere
            harum illum ipsa ipsum iste nemo nesciunt nostrum officia, provident, quod ratione saepe sed veniam
            voluptatibus.
        </div>
        <div>Amet autem doloribus eveniet iste laudantium magnam nam ut? Accusantium adipisci alias atque aut dolore
            eum, expedita fuga obcaecati rem sed totam voluptatibus! Accusamus eum facilis natus nihil perferendis,
            sint.
        </div>
        <div>A debitis eius excepturi ipsa omnis optio quia rem sed ut veritatis. Adipisci consequatur distinctio
            molestias numquam, placeat recusandae sed. Amet culpa dicta eius eligendi hic magni, maiores nemo nulla!
        </div>
        <div>Ex id quaerat ratione sequi. Architecto asperiores expedita inventore itaque minima quisquam sapiente
            tempore! Incidunt inventore magni nostrum quam quo, soluta voluptas. Eaque, earum id labore non pariatur
            quidem recusandae?
        </div>
        <div>Ad atque autem consectetur consequatur consequuntur cum deleniti dicta doloribus ea expedita hic iste
            libero minus mollitia quaerat ratione, saepe, temporibus vel? Adipisci harum, molestiae nemo odio quaerat
            suscipit voluptas.
        </div>
        <div>Accusamus est in praesentium. Iure natus saepe unde. Cumque distinctio id laborum necessitatibus nisi?
            Aliquam aliquid animi, architecto asperiores dignissimos eum eveniet ipsum libero maxime nulla quos
            temporibus veritatis voluptatem.
        </div>
        <div>Ad architecto asperiores delectus eligendi id impedit ipsa itaque, laboriosam minus nobis, non numquam
            officiis placeat possimus qui quia ratione rem sapiente sunt totam ullam velit veritatis! Beatae itaque,
            pariatur.
        </div>
        <div>Ab accusamus culpa distinctio dolore eligendi eos, fuga fugit incidunt ipsam ipsum maxime officiis quam qui
            repellendus, rerum sit ullam voluptate voluptatibus! Asperiores, autem commodi maiores nulla pariatur
            perspiciatis rerum?
        </div>
        <div>At consequatur doloremque ducimus earum, expedita facilis in libero, molestiae, neque officia quaerat
            quidem velit voluptates? Consequuntur expedita possimus sed. Ad atque, dignissimos eligendi enim eum nam
            nostrum recusandae sed.
        </div>
        <div>A aperiam consectetur cupiditate eius excepturi illo maiores, modi neque quas quibusdam quo tempore tenetur
            voluptatem. Asperiores commodi consequuntur doloribus quia quis. Beatae dolor dolore libero odio repudiandae
            tenetur ut?
        </div>
        <div>Delectus distinctio modi officia omnis perferendis placeat tempore! Ad amet asperiores at consectetur dicta
            doloremque eaque eligendi error explicabo, fugit id illum itaque necessitatibus porro soluta velit
            voluptatum! Atque, officiis?
        </div>
        <div>Aliquam aliquid animi asperiores cupiditate dicta dolor doloribus, dolorum ducimus esse exercitationem fuga
            impedit in iusto laborum nesciunt nobis odio optio quidem quis repellat repudiandae sapiente ullam vel velit
            voluptates.
        </div>
        <div>Consequuntur, odio vel? Consectetur cum enim expedita officia. Accusantium consequatur cupiditate debitis
            doloremque ex ipsum officia omnis praesentium, quia vitae? Atque cum fugiat nisi obcaecati officia officiis
            reprehenderit vel, voluptatem?
        </div>
        <div>Corporis eum exercitationem explicabo facilis fuga molestias nemo nihil nobis nostrum quasi. Ad aliquid
            debitis, delectus, dolor eveniet ex excepturi explicabo facere fugit inventore mollitia optio pariatur
            repellendus soluta sunt.
        </div>
        <div>Alias amet cum cupiditate delectus earum eius eum in maxime nobis odio odit officia officiis possimus
            praesentium quibusdam, sed sint temporibus veritatis voluptatem voluptatibus. Consequatur exercitationem
            incidunt iste magni officiis!
        </div>
        <div>Aspernatur dolore earum excepturi possimus quis, sequi? Accusantium aliquam aspernatur debitis deserunt
            dolores ducimus error et ipsa iure iusto magnam optio soluta, vel, vero voluptatibus. Consequatur explicabo
            magnam ratione ut?
        </div>
        <div>Accusamus adipisci alias, atque beatae corporis, dolorem ducimus enim expedita inventore iste magnam, optio
            perspiciatis quisquam reprehenderit sequi tempore tenetur vero vitae voluptatibus voluptatum. Ab beatae
            blanditiis error tempore veniam.
        </div>
        <div>Alias autem cupiditate deserunt ea eligendi eos impedit incidunt ipsum odit quis ratione reiciendis, rem
            sint ut vel vero voluptatum. Ab architecto dignissimos eligendi inventore omnis provident quae qui
            voluptatem!
        </div>
        <div>Cumque, deleniti doloribus, eius eligendi explicabo facere fugiat fugit molestiae neque pariatur placeat,
            porro rem similique sint voluptate! Ad architecto at commodi deserunt facilis fuga harum porro, quasi quis
            vel.
        </div>
        <div>Animi blanditiis cum distinctio doloribus esse facere nulla porro reiciendis? Dolore doloribus eaque neque
            nihil, nulla numquam quas suscipit ullam unde. Animi corporis dolor doloremque, eius enim odit placeat
            possimus.
        </div>
        <div>Accusamus accusantium ad aliquid, atque excepturi harum illum labore laudantium neque numquam placeat porro
            quas recusandae repudiandae voluptatum? Asperiores earum hic maiores natus necessitatibus possimus qui
            quisquam reprehenderit similique sunt.
        </div>
        <div>Adipisci amet autem delectus deleniti dolores error ex illum, impedit ipsam iste itaque, laboriosam minus
            modi neque nihil officia placeat quasi quod reiciendis reprehenderit repudiandae sunt ullam ut vel
            veritatis?
        </div>
        <div>Aliquid at consectetur dignissimos, ea quisquam sed. Blanditiis et illum nam nihil quam? Asperiores
            consequuntur eaque et facere molestiae nemo nihil odit officia perferendis placeat, reprehenderit
            repudiandae soluta temporibus voluptate!
        </div>
        <div>Accusamus animi aperiam consequuntur culpa distinctio dolor doloremque eaque explicabo facilis, fuga hic in
            inventore ipsum laborum magni provident quos reiciendis reprehenderit rerum sint totam unde vel veritatis
            vero voluptas!
        </div>
        <div>Adipisci aliquam aperiam at beatae blanditiis, dignissimos dolorem doloribus ducimus et libero quis,
            similique ullam ut veritatis voluptatem! Excepturi nihil officia vel! Adipisci eos esse fugit quam quos
            ratione ullam!
        </div>
        <div>Accusantium animi cupiditate, deleniti dolore doloremque enim explicabo fuga fugiat hic iure laborum
            numquam obcaecati pariatur placeat porro quam quod repellat, repudiandae ullam ut? Dignissimos enim
            excepturi porro quidem sed!
        </div>
        <div>Ab ad, alias aperiam blanditiis consequatur cumque deleniti doloremque dolores eius eligendi eum expedita
            facere illum in inventore mollitia necessitatibus nostrum odio officiis, quam quidem quo quos reprehenderit
            similique sunt.
        </div>
        <div>Commodi doloremque non quas quia recusandae sint vitae. Alias corporis dicta dignissimos doloribus eveniet
            explicabo, harum magni mollitia necessitatibus numquam perferendis placeat praesentium quis quo, sit tempora
            vitae! Non, tenetur.
        </div>
        <div>Aliquam aliquid animi, consequatur deleniti exercitationem itaque laboriosam mollitia nisi quis, quisquam
            sed tenetur voluptas. Accusantium et eum fuga rem vel? Beatae esse excepturi itaque obcaecati quisquam rem
            sunt suscipit!
        </div>
        <div>Cumque eius maiores quidem sed vitae voluptatum. Aut fugiat iure nihil quaerat similique sint sunt. At
            blanditiis deserunt enim et facere iste maiores, necessitatibus non officia qui veritatis voluptas
            voluptates.
        </div>
        <div>Asperiores, assumenda dolores ex explicabo neque obcaecati reiciendis vel veniam. Consectetur distinctio
            dolorum earum eum excepturi incidunt qui reiciendis sit vero voluptatibus? Autem laboriosam nam officia
            praesentium reprehenderit sapiente, voluptatum?
        </div>
        <div>Accusamus ad blanditiis consectetur culpa delectus, doloribus facere iste, iusto molestias neque nisi optio
            quam, quo reprehenderit sint sunt suscipit tenetur voluptas voluptate voluptatem! Deserunt iusto nisi omnis
            perferendis veritatis!
        </div>
        <div>Adipisci aspernatur consectetur cumque debitis dicta eum ex expedita facere fugit impedit inventore ipsum
            itaque iusto labore laboriosam magnam maiores, nobis nulla, perspiciatis repellendus sequi, ullam velit vero
            voluptate voluptatibus.
        </div>
        <div>Aliquid cupiditate eos error impedit iste maiores sunt veniam. Adipisci aliquam architecto commodi enim
            excepturi facere nulla, porro quae quam rem sed, tenetur, unde vel. Eos incidunt molestiae quis
            voluptatibus.
        </div>
        <div>Accusantium aliquam aliquid architecto, autem dolores est ex expedita fugit illo iure iusto molestias,
            officiis qui quidem rerum sapiente vel. Asperiores consequuntur cum deleniti excepturi fugiat minima
            perferendis quae veniam.
        </div>
        <div>Ad animi asperiores consequuntur deleniti dicta, dolore ea excepturi exercitationem expedita illo illum
            ipsum laborum magni nesciunt, non odio optio possimus repellendus rerum sapiente similique tempore ut veniam
            veritatis voluptatibus?
        </div>
        <div>At autem facilis fugit illum maxime, necessitatibus nesciunt nobis odio omnis, similique sint voluptatem!
            Amet atque cupiditate distinctio est laudantium magnam maiores molestias, necessitatibus possimus quas quos
            soluta unde voluptate.
        </div>
        <div>Aspernatur beatae blanditiis consequuntur, culpa facere laudantium nemo quod quos reiciendis repudiandae
            rerum suscipit tempora. Ab animi aperiam aut cum debitis dolor et id nostrum sunt, tempore totam, ut vel.
        </div>
        <div>Adipisci assumenda cum delectus eum id illo impedit laborum magnam magni modi, molestiae molestias nam
            perferendis recusandae sed totam vitae! Ab animi distinctio doloremque error ipsum neque possimus, similique
            suscipit?
        </div>
        <div>Accusantium commodi cumque earum eum fuga libero molestiae mollitia neque quaerat ut. Asperiores debitis
            dolorem earum facilis, impedit ipsum laborum mollitia nobis nostrum optio quibusdam rem repellat similique
            temporibus ut.
        </div>
        <div>Doloremque eligendi eos expedita illum possimus quos reiciendis sunt. Accusantium adipisci aspernatur at ea
            enim eveniet excepturi expedita ipsam iste laboriosam nihil possimus quia reprehenderit repudiandae, tempore
            tenetur veniam voluptatem.
        </div>
        <div>Adipisci deserunt error ex iure laborum! Architecto, aspernatur aut distinctio dolores dolorum fugiat illo
            iure mollitia nostrum obcaecati praesentium quia repudiandae sapiente similique sint sit ullam vel
            veritatis? Dicta, quam.
        </div>
        <div>Aliquid amet asperiores aspernatur corporis cumque dicta dolorum eaque earum error et, facere fugit illum,
            minus mollitia nobis obcaecati optio pariatur quo soluta, temporibus! Corporis eaque minima suscipit. A,
            fugiat?
        </div>
        <div>A aperiam assumenda atque blanditiis culpa cum cupiditate delectus deserunt earum harum illo iste, nam,
            odit officiis pariatur, perspiciatis placeat quae quam qui saepe soluta sunt voluptate. Earum, praesentium
            suscipit.
        </div>
        <div>Aspernatur atque culpa dolor error, est ex in iste libero odio perferendis porro quae quasi quos similique
            temporibus vero voluptatibus? A culpa cupiditate et fugit minima molestias mollitia unde voluptates.
        </div>
        <div>Consequuntur dicta ducimus earum expedita numquam quae quia, quis tempora. Animi dolor ducimus facilis
            libero perspiciatis quasi, repudiandae sequi voluptatibus. Earum iste labore magnam maxime, quibusdam rem
            repudiandae totam voluptas.
        </div>
        <div>Ad aut delectus ducimus iusto natus odit officia placeat, suscipit. Animi aut consectetur incidunt, maxime
            nemo reprehenderit rerum vitae. Aperiam doloremque dolorum impedit ipsum maxime nemo, possimus quis ratione
            vero.
        </div>
        <div>Accusantium commodi consequatur minima odit praesentium qui sunt ullam. Animi, architecto aspernatur beatae
            debitis distinctio eos esse iusto natus, non obcaecati, placeat provident qui quidem recusandae rerum
            similique suscipit vero?
        </div>
        <div>Ab, accusamus aperiam cumque dicta doloribus eligendi fuga id inventore ipsum iure laudantium maxime minima
            necessitatibus nihil omnis, pariatur perspiciatis quaerat quas, quidem repudiandae soluta sunt tempore
            tenetur? Laborum, voluptatem.
        </div>
        <div>Est neque repudiandae similique. Ab adipisci aliquid commodi consequatur debitis deleniti error esse
            excepturi inventore, labore magnam, minima nemo officia officiis pariatur quam quas quidem saepe sapiente
            sunt vel voluptate.
        </div>
        <div>Alias amet, culpa eveniet harum magni vel. Accusantium at beatae blanditiis consectetur ducimus excepturi
            expedita natus, necessitatibus, provident quae sapiente ullam veritatis voluptatum? Commodi deleniti
            dignissimos ipsam libero provident tenetur!
        </div>
        <div>Architecto aspernatur beatae commodi debitis delectus dolorem doloribus eligendi ex id illo ipsam labore,
            laboriosam modi natus numquam omnis praesentium quasi quibusdam quis, ratione suscipit temporibus tenetur
            unde vel voluptas!
        </div>
        <div>A culpa, debitis dolorum ea facilis, incidunt inventore labore laborum laudantium molestias nostrum nulla
            quas quibusdam quis quod? Aliquam architecto aspernatur blanditiis fugiat, porro veniam voluptates. Dolores
            quia reprehenderit veniam!
        </div>
        <div>Aliquid consequuntur corporis cumque ducimus error fugiat impedit in laborum laudantium maiores
            necessitatibus optio placeat, sunt unde voluptatum. Aspernatur culpa delectus est explicabo iure
            necessitatibus nemo quam quis sapiente sit?
        </div>
        <div>Accusantium ad aspernatur autem consequuntur culpa distinctio eos error esse, excepturi impedit ipsa iure
            iusto maxime minima minus nobis obcaecati provident quam quas reprehenderit sed sint totam unde vero
            voluptatum?
        </div>
        <div>A aliquid commodi cupiditate debitis, dignissimos eius fugiat id iusto minima tenetur? Dolore error labore
            laboriosam mollitia nemo numquam perspiciatis, sit. Doloremque laudantium minus nobis officiis quis sapiente
            sequi voluptatem!
        </div>
        <div>Alias asperiores autem deleniti deserunt ea eligendi fuga hic iusto modi nisi non possimus praesentium quos
            veritatis, vitae. Consequatur dolore earum eius explicabo hic nam numquam similique totam. Expedita, quae!
        </div>
        <div>Eos esse ex illum laboriosam laborum quia repellat, ullam voluptatibus! Ab dolores facere hic ipsum,
            magnam, maiores minima nam nostrum nulla numquam officiis quia repellendus reprehenderit sed voluptates?
            Aperiam, iure.
        </div>
    </div>
</body>
</html>